<template>
  	<div id="uploadFile">
  		<header>
  			<i @click="goBack()"></i>
  			<div>上传文件</div>
  		</header>
  		<div class="border-8"></div>
  		<p>上传有关牙医的音频，视频文件:</p>
  		<div class="upfileDiv">
  			<img src="../../image/icon_upload_file.png" width="120" alt="">
  			<!-- <a>{{fileName}}</a> -->
	    	<!-- <input type="file" name="file" class="upfile"  @change="upfile" /> -->
	    	<iframe name="myiframe" width="0" height="0" scrolling="no" style="display: none"></iframe>
			<form id='myupload' :action='$api.baseURLUpload+"/photos/upload_shop"' method='post' enctype='multipart/form-data' target="myiframe">
                <input type="file" name="file" class="upfile" @change="upfile" />
                <!-- <input type="submit" id="submit" style="display: none"> -->
            </form>

  		</div>
		<div class="progress">
	        <div class="bar" :style="{width: barWidth+'%'}"></div>
	        <div class="upstatus" style="margin-top:10px;"></div>
	    </div>
	    <div class="mesBox">
	    	<div class="message">
				<div>
					我们支持ogg,mp4,webm等文件格式, 文件小于200M, 请尽量上传高音质音频.
				</div>
				<div>
					请遵守<i class="blue">《版权声明》</i>相关约定, 只上传版权拥有者允许你上传的音频或视频文件 <i class="red">如上传盗版内容, 将会导致下架,封号,索赔,甚至被追究刑事责任.</i>
				</div>
			</div>
	    </div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				barWidth: 0,
				fileName: '',
			}
		},
		components: {

		},
		methods: {
			goBack() {
                console.log(this.$route.query.id)
                if(this.$route.query.id!=undefined){
                    this.$router.push({path:'/homeDetail',query:{id:this.$route.query.id}})
                }else{
				this.$router.push({path:'/my'})

                }
			},
			//上传视频
			upfile: function() {
				var file = $(".upfile")[0].files[0];
				this.fileName = file.name;
				console.log(file);
				//这里我们判断下类型如果不是视频就返回
				var fileTypes = new Array("ogg","mp4","webm");  //定义可支持的文件类型数组
				var fileTypeFlag = "0";
				var newFileName = this.fileName.split('.');
				newFileName = newFileName[newFileName.length-1];
				for(var i=0;i<fileTypes.length;i++){
				　　if(fileTypes[i] == newFileName){
				　　　　fileTypeFlag = "1";
				　　}
				}
				if(fileTypeFlag == "0"){
					this.$utils._toast("视频文件必须是ogg、mpeg4、webm格式！");
				　　return false;
				}
				if(file.size > 200 * 1024 * 1024) {
					this.$utils._toast('上传文件不能超过200M');
					return false;
				}
				var _this = this;
				var reader = new FileReader();
				reader.readAsDataURL(file);
				// console.log(file);
				if(file&&fileTypeFlag) {
					//如果选中文件 就上传
					var options  = {
			            url: this.$api.baseURLUpload+"/photos/upload_shop",   //同action
			            type:'post',
			            beforeSend:function(xhr){//请求之前
			            },
			            uploadProgress: function(event, position, total, percentComplete) {
							//上传的过程
			                //position 已上传了多少
			                //total 总大小
			                //已上传的百分数
							_this.barWidth = percentComplete;
			            },
			            success:function(data) {
			            	_this.barWidth = 100;
							if(data.state == 200) {
								console.log(data);
								_this.$utils._toast("上传成功,1s后跳转");
								setTimeout(() => {
				                    _this.$router.push({name:'fileDetail',query:{name: _this.fileName,vdoUrl: data.result}});
				                }, 1000);
							}
			            },
			　　 		complete:function(xhr){//请求完成

			            },
			            error: function(xhr,status,msg){
							_this.$utils._toast("视频异常！"+xhr.msg);
			            }
			        };
			        $("#myupload").ajaxSubmit(options);
				}
			},
		},
		created() {
			
		}
	}
</script>
<style lang="scss">
</style>
